import PropTypes from 'prop-types';

import styled from 'styled-components';
import {media} from 'helpers/style-utils';
import oc from 'open-color';
import {Icon, Menu} from 'antd';

const {SubMenu} = Menu;
const NativeMenu = styled.div`
  display: block;
  width: ${p => p.visible ? p.width : '80px'};
  transition: width .2s ease-in-out;
  overflow-x: hidden;
  overflow-y: auto;
  height:100%;
  position: relative;
  z-index: 1;

  ${media.mobile`
    position: absolute;
    top: 4rem;
    left: 0;
    width: ${p => p.visible ? '100%' : '0'};
    height: ${p => p.visible ? '100%' : '0'};
    transition: height .2s ease-in-out;
  `}

  background-color:#fff;
  box-shadow: 3px 3px 6px rgba(0,0,0,0.1), 3px 3px 6px rgba(0,0,0,0.2);
`;

const StyledItem = styled.div`
  display: flex;
  align-items: center;
  padding : 1rem;

  transition: all .3s;

  cursor: pointer;
  color: white;
  background: ${p => p.active ? oc.indigo[7] : oc.indigo[5]};

  border-left: ${p => p.active ? `12px solid ${oc.indigo[6]}` :
    `12px solid ${oc.indigo[4]}`};

  &:hover {
    background: ${p => p.active ? oc.indigo[7] : oc.indigo[6]};
  }
`;

const NativeIcon = styled.div`
  display: inline-flex;
  padding-left: 1rem;
  font-size: 1.5rem;
`;

const Title = styled.div`
  padding-left: 2rem;
  font-size: 1.2rem;
`;

const Item = ({children, selected, name, onSelect}) => (
    <StyledItem
        onClick={() => onSelect(name)}
        active={name === selected}>
        {children}
    </StyledItem>
);

const propTypes = {
    isOpen: PropTypes.bool,
    width: PropTypes.string,
    selectedView: PropTypes.string,
    onSelectView: PropTypes.func
};

const defaultProps = {
    width: "16rem",
};

const Sidebar = ({isOpen, width, selectedView, onSelectView}) => {
    const handleClick = e => {
        onSelectView(e.key)
    };
    return (
        <NativeMenu visible={isOpen} width={width}>
            <Menu
                onClick={handleClick}
                defaultSelectedKeys={['equipment_info']}
                defaultOpenKeys={['opt', 'amfAll','equipment_info_all']}
                // theme="dark"
                inlineCollapsed={!isOpen}
                mode="inline"
            >

                <SubMenu
                    key="equipment_info_all"
                    title={
                        <span>
              <Icon type="hdd"/>
              <span>设备状态</span>
            </span>
                    }
                >
                    <Menu.Item key="equipment_info"><Icon type="read" />基础信息</Menu.Item>
                    <Menu.Item key="info_get"><Icon type="ant-design" />一键抓包</Menu.Item>
                    <Menu.Item key="ng_info"><Icon type="box-plot" />NG接口状态</Menu.Item>
                </SubMenu>


                <SubMenu
                    key="opt"
                    title={
                        <span>
              <Icon type="appstore"/>
              <span>参数配置</span>
            </span>
                    }
                >
                    <SubMenu key="amfAll" title={
                        <span>
              <Icon type="deployment-unit"/>
              <span>Amf参数</span>
            </span>
                    }>
                        <Menu.Item key="amfBase"><Icon type="tag"/>AMF_ID参数列表</Menu.Item>
                        <Menu.Item key="amfAbility"><Icon type="thunderbolt"/>AMF能力指示</Menu.Item>
                        <Menu.Item key="amfLogLevel"><Icon type="trophy"/>AMF日志等级</Menu.Item>
                        <Menu.Item key="amfSctp"><Icon type="build"/>Sctp参数配置</Menu.Item>
                        <Menu.Item key="amfPlmn"><Icon type="container"/>PLMN参数列表</Menu.Item>
                        <Menu.Item key="amfSecurity"><Icon type="safety"/>安全算法配置</Menu.Item>
                        <Menu.Item key="amfPeriodic"><Icon type="deployment-unit"/>周期性注册配置</Menu.Item>
                        <Menu.Item key="amfImplicit"><Icon type="rocket"/>隐式去附着配置</Menu.Item>
                        <Menu.Item key="amfAccount"><Icon type="team"/>开户销户设置</Menu.Item>
                        <Menu.Item key="amfInOutLv"><Icon type="gold"/>吞吐量测试</Menu.Item>
                    </SubMenu>
                    <SubMenu key="SmfAll" title={
                        <span>
                          <Icon type="cluster"/>
                          <span>Smf参数</span>
                        </span>
                    }>
                        <Menu.Item key="smfLogLevel"><Icon type="trophy"/>SMF日志等级</Menu.Item>
                        <Menu.Item key="smgN34"><Icon type="gold"/>N3N4参数</Menu.Item>
                        <SubMenu
                            key="smfCConfig"
                            title={
                                <span>
                                  <Icon type="block"/>
                                  <span>DNN配置参数</span>
                                </span>
                            }
                        >
                            <Menu.Item key="smfAddress"><Icon type="profile"/>地址池参数</Menu.Item>
                            <Menu.Item key="smfQs"><Icon type="rocket"/>QS参数</Menu.Item>
                            <Menu.Item key="smfRules"><Icon type="border"/>会话规则</Menu.Item>
                            <Menu.Item key="smfManage"><Icon type="tool"/>会话管理</Menu.Item>
                        </SubMenu>
                    </SubMenu>
                    <Menu.Item key="dpConfig">
                        <Icon type="control"/>
                        <span>Dp参数配置</span>
                    </Menu.Item>
                </SubMenu>
                <SubMenu
                    key="systemTool"
                    title={
                        <span>
              <Icon type="setting"/>
              <span>系统设置</span>
            </span>
                    }
                >
                    <Menu.Item key="fileManage"><Icon type="cloud-server"/>配置文件管理</Menu.Item>
                    <Menu.Item key="account"><Icon type="user"/>账号管理</Menu.Item>
                </SubMenu>

                {/*<SubMenu*/}
                {/*    key="sub2"*/}
                {/*    title={*/}
                {/*      <span>*/}
                {/*    <Icon type="thunderbolt" />*/}
                {/*    <span>ningshi5gc</span>*/}
                {/*  </span>*/}
                {/*    }*/}
                {/*>*/}
                {/*    <Menu.Item key="subscriber"><Icon type="control" />Subscriber</Menu.Item>*/}
                {/*    <Menu.Item key="profile"><Icon type="compass" />Profile</Menu.Item>*/}
                {/*</SubMenu>*/}

            </Menu>
        </NativeMenu>

    )
};

Sidebar.propTypes = propTypes;
Sidebar.defaultProps = defaultProps;

export default Sidebar;